<template>
	<view class="bigbox">
		<!-- 1.启动应用，进入登录页面。页面上方显示产品Logo，中部显示
		标题“账号”、账号输入框、标题“密码”、密码输入框。下方显示、
		忘记密码按钮、登录按钮和用户注册按钮。 -->
		<view class="logo">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<!-- 输入主体 -->
		<view class="list">
			<view class="list-item">
				<text>账号</text>
				<view class="ipt">
				<input type="text" value="" maxlength="10" @input="onIptAct" v-model="act" />
				</view>
			</view>
			<view class="list-item">
				<text>密码</text>
				<view class="ipt">
					<input type="text" value="" :password="!showPwd" v-model="pwd" />
					<text @click="showPwd = !showPwd">{{showPwd ? '隐藏' : '显示'}}密码</text>
				</view>
			</view>
		</view>

		<view class="dibu">
			<text>忘记密码</text>
			<text @click="goReg()">用户注册</text>
		</view>
		<button type="primary" @click="onSub()">登录</button>

		<!-- 2.用户名和密码输入框、登录按钮均为圆角样式。用户名输入框
		只能输入大小写字母或数字，其他无法输入，最长输入10位。密码输
		入框默认密文显示，具有显示与隐藏按钮，点击可以实现显示或隐藏
		密码功能 -->
	</view>
</template>

<script>
	// 3.点击登录按钮，判断用户名和密码框是否为空，如果为空请提
	// 示友好错误；不为空的情况下请求API，用户名和密码正确后跳转到
	// 首页，反之显示友好的错误提示。
	function ero(txt) {
		uni.showToast({
			title: txt,
			icon: "error"
		})
	}

	function checkIsNull(title, val) {
		if (!val) {
			ero(title + "不能为空")
			return true
		}
		return false
	}

	// 4.通过点击登录页面的【用户注册】按钮进入到注册页面。页面
	// 中输入项包含账号、姓名、手机号、邮箱、密码和确认密码；每个输
	// 入框都具有左侧图标和圆角。
	export default {
		data() {
			return {
				pwd: '',
				act: '',
				showPwd: false
			}
		},
		methods: {
			onIptAct(e) {
				const v = e.detail.value
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.act = v;
				this.$nextTick(function() {
					this.act = f;
				})
			},
			goReg() {
				uni.navigateTo({
					url: "../reg/reg"
				})
			},
			onSub() {
				if(checkIsNull("账号", this.act) || checkIsNull("密码", this.pwd)){
					return true;
				}
				// this.act = '123'
				// this.pwd = 'p'
				this.$req("POST", "/login", {
						act: this.act,
						pwd: this.pwd
					})
					.then((res) => {
						const data = res[1].data;
						if(data?.code != 0){
							return ero("登录失败: " + data?.message)
						}
						uni.reLaunch({
							url: "../home/home"
						})
					})
					.catch((e) => {
						//TODO handle the exception
						ero("登录失败")
						console.error(e)
					})
			}
		}
	}
	// 15:43 - 15m
</script>

<style>
.bigbox{
	padding:200rpx 70rpx;
}
.logo>image{
	width: 240rpx;
	height: 240rpx;
	margin-left: 180rpx;
	margin-bottom: 30rpx;
	border-radius: 120rpx;
}

.ipt{
	margin: 10rpx 0 30rpx;
	line-height: 120rpx;
	height: 120rpx;
	background-color: #f7f8fa;
	border-radius: 25rpx;
	display: flex;
	justify-content: space-between;
}
.ipt>input{
	margin-bottom: 30rpx;
	line-height: 120rpx;
	height: 120rpx;
}
.dibu{
	display: flex;
	justify-content: space-between;
	color: #1890FF;
}
button{
	margin-top: 100rpx;
}
</style>
